// 获取展示的按钮
$(function () {
    //获取到所有的按钮
    var $actives = $(".left-nav > li");
    // 获取到jquery对象的长度
    var length = $actives.length
    // 获取到所有需要展示的divs
    var $chips = $(".chips");
    // 获取箭头按钮
    var $jiantouz1 = $(".jiantouz1");
    var $jiantouy1 = $(".jiantouy1");
    // 定义变量
    var targetIndex = 0;
    // 定义变量
    var index ;
    // console.log(length);
    for (let i = 0; i < length; i++) {
        $actives[i].onclick = function () {
            $actives[i].setAttribute("class", "active");
            $actives[targetIndex].removeAttribute("class");


            $chips[i].classList.add("show");
            $chips[targetIndex].classList.remove("show");
            targetIndex = i;
            console.log(targetIndex);
        }
    }
    // 绑定事件监听
    $jiantouz1.on('click',function(){
        targetIndex--
        index = targetIndex
        if(targetIndex < 0){
            targetIndex = 1
        }
        $actives[targetIndex].setAttribute("class", "active");
        $actives[index+1].removeAttribute("class");
        // 更改右侧导航的变化
         $chips[targetIndex].classList.add("show");
         $chips[index+1].classList.remove("show");
    });
    $jiantouy1.on('click',function(){
        targetIndex ++ 
        index = targetIndex
        if(targetIndex > 1){
            targetIndex = 0
        }
        // 更改左侧导航的按钮变化
        $actives[targetIndex].setAttribute("class", "active");
        $actives[index-1].removeAttribute("class");
        // 更改右侧导航的变化
        $chips[targetIndex].classList.add("show");
        $chips[index-1].classList.remove("show");

    })
})